<template>
  <div class="form-box">
    <TurboForm
      ref="formRef"
      :rules="rules"
      :form-list="formItems"
      :form-option="formOption"
      @load="load"
    >
      <template #center>
        <h1>插槽内容</h1>
      </template>
    </TurboForm>

    <el-button @click="submit">
      校验
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from 'vue';
import type { UploadRequestOptions } from 'element-plus'
import TurboForm from './packages/EleganceForm.vue'

const formRef = ref()
const formOption = {
  labelWidth: 100
}

const rules = {
  aaa: [
    { required: true }
  ],
  kkk: [
    { required: true }
  ]
}

// 自定义上传
const httpRequest = (options: UploadRequestOptions) => {
  console.log(options);

  return new Promise(resolve => {
    resolve({
      id: 102,
      fileName: 'food.jpeg',
      fileUrl: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    })
  })
}

const formItems = [
  {
    title: '基本信息',
    flod: true,
    formItemArr: [
      {
        label: '社区',
        prop: "aaa",
        type: "Input"
      },
      {
        label: '所属网格',
        prop: "sss",
        type: "Select",
        option: []
      },
      {
        label: '网格负责人',
        prop: "ddd",
        type: "Radio",
        option: [
          { value: '1', label: '选项1' },
          { value: '2', label: '选项2' }
        ],
        events: {
          change: (value: string) => {
            if (value === '1') {
              formRef.value.setHidden('fff', false)
            } else {
              formRef.value.setHidden('fff', true)
            }
          }
        }
      },
      {
        label: '综合体名称',
        prop: "fff",
        type: "Input"
      },
      {
        label: '地理位置',
        prop: "jjj",
        type: "Input",
        defineCustom: () => {
          return '查看点位'
        }
      },
      {
        label: '表单内插槽',
        prop: "ppp",
        type: "#",
        defineCustom: () => {
          return h('span', { style: { color: 'red' } }, '自定义内容')
        }
      },
      {
        label: '附件上传',
        prop: "fileList",
        type: "Upload",
        span: 24,
        itemAttrs: {
          limit: 2,
          props: {
            name: 'fileName',
            url: 'fileUrl',
            uid: 'id'
          },
          httpRequest: httpRequest,
        }
      },
    ]
  },
  {
    title: '测试插槽',
    flod: true,
    type: 'slot',
    slotName: 'center',
    formItemArr: []
  },
  {
    title: '',
    formItemArr: [
      {
        label: '社区222',
        prop: "",
        type: '#',
        defineCustom: () => {
          return h('span', { style: { color: 'red' } }, '自定义内容')
        }
      },
      {
        label: '所属网格222',
        prop: "lll",
        type: "Input"
      }
    ]
  }
]

const submit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log('表单数据', formRef.value.formData);
    }
  })
}

// 表单加载完成事件
const load = () => {
  console.log('表单加载完成');
  formRef.value.setForm({
    fileList: [
      {
        id: 101,
        fileName: 'food.jpeg',
        fileUrl: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
      },
    ]
  })
}

</script>

<style scoped>
.form-box {
  width: 800px;
  height: 800px;
  margin: 0 auto;
  border: 1px solid #000;
}
</style>
